<template>
    <div class="box">
        <div class="top-pie-chart">
            <div class="pie-chart" ref="pieChart1"></div>
            <div class="pie-chart" ref="pieChart2"></div>
        </div>
        <div class="mapTop" ref="centerMap"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import guizhouJson from '@/assets/brand/guizhouGeoJson520000.json';


onMounted(() => {
    initCenterMap();
    initPieChart();
})

//中心地图
const centerMap = ref<HTMLElement | null>(null);
// 初始化
let centerMapInstance: echarts.ECharts | null = null;
const initCenterMap = () => {
    if (centerMap.value) {
        centerMapInstance = echarts.init(centerMap.value);
        updateCenterMap();
    }
};
//采用离线方案

// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
    return rem * rootFontSize;
}

const updateCenterMap = async () => {
    try {
        var option;
        centerMapInstance.showLoading();
        // $.get('../../assets/brand/guizhouGeoJson520000.json', function (guizhouJson) {
        centerMapInstance.hideLoading();
        echarts.registerMap('Guizhou', guizhouJson);
        // 修改后的数据
        var data = [
            { name: '贵阳', value: 432 },
            { name: '遵义', value: 301 },
            { name: '六盘水', value: 320 },
            { name: '安顺', value: 290 },
            { name: '毕节', value: 365 },
            { name: '铜仁', value: 381 },
            { name: '黔西南', value: 160 },
            { name: '黔东南', value: 220 },
            { name: '黔南', value: 130 },
            { name: '外省地区', value: 60 } // 外围块表示外省地区
        ];

        // 按人口数量排序
        data.sort(function (a, b) {
            return a.value - b.value;
        });

        // 地图配置
        const mapOption = {
            // 调整图表内容区域的布局
            grid: {
                left: '3%',    // 距离左侧 
                right: '0%',   // 距离右侧 
                top: '0%',     // 距离顶部 
                bottom: '0%',  // 距离底部
                containLabel: true // 包含坐标轴标签
            },
            //右下角标尺
            visualMap: {
                left: 'right', // 距离右侧 10%
                itemWidth: remToPx(2), // 宽度为容器宽度的 10%
                itemHeight: remToPx(8),// 高度为容器高度的 50%
                min: 50, // 最小人口数量
                max: 500, // 最大人口数量
                inRange: {
                    // prettier-ignore
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                },
                text: ['High', 'Low'],
                calculable: false,
                textStyle: {
                    color: '#E6E6FA', // 设置文字颜色为黑色
                    fontSize: '0.8rem', // 设置文字大小
                    fontWeight: 'bold' // 设置文字粗细
                },
            },
            series: [
                {
                    id: 'population',
                    type: 'map',
                    roam: true,
                    map: 'Guizhou', // 使用注册的贵州省地图
                    animationDurationUpdate: 1000,
                    universalTransition: true,
                    data: data,
                    label: {
                        show: true, // 显示地区名称和人数
                        formatter: function (params) {
                            return params.name + '\n' + params.value;
                        },
                        fontSize: '0.8rem',
                        color: '#000'
                    },
                    itemStyle: {
                        borderWidth: '0.2rem', // 边框宽度
                        areaColor: function (params) {
                            // 使用 visualMap 的颜色
                            return mapOption.visualMap.inRange.color[
                                Math.floor(
                                    ((params.value - mapOption.visualMap.min) /
                                        (mapOption.visualMap.max - mapOption.visualMap.min)) *
                                    (mapOption.visualMap.inRange.color.length - 1)
                                )
                            ];
                        }
                    }
                },
                {
                    type: 'map',
                    map: 'Guizhou',
                    roam: true,
                    data: [{ name: '外省地区', value: 60 }],
                    itemStyle: {
                        areaColor: '#ccc', // 省外区域颜色
                        borderColor: '#000'
                    },
                    label: {
                        show: true,
                        formatter: '外省地区\n1000000',
                        fontSize: '0.6rem',
                        color: '#000'
                    }
                }
            ]
        };

        // 柱状图配置
        const barOption = {
            grid: { // 增加与地图相同的grid配置
                left: '2%',   // 给y轴标签留出空间
                right: '4%',
                top: '10%',     // 顶部不留空隙
                bottom: '5%',  // 底部不留空隙
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    fontSize: remToPx(0.8), // 设置 X轴文字大小为 0.6rem
                    color: '#ccc' // X轴文字颜色
                }
            },
            yAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    fontSize: remToPx(0.8), // 设置 Y轴文字大小为 0.8rem
                    color: '#ccc', // Y轴文字颜色
                    rotate: 30, // 文字旋转角度
                    lineHeight: remToPx(1) // 行高设置为 1.2rem
                },
                data: data.map(function (item) {
                    return item.name;
                })
            },
            animationDurationUpdate: 2000,//图形转换时间
            series: {
                type: 'bar',
                id: 'population',
                barMaxWidth: remToPx(2), // 设置柱子的宽度为 1rem
                barMinWidth: remToPx(1.5), // 设置柱子的宽度为 1rem
                // 如果需要限制最大宽度，可以使用 barMaxWidth
                // barMaxWidth: remToPx(2), // 设置柱子的最大宽度为 2rem
                data: data.map(function (item) {
                    return {
                        value: item.value,
                        itemStyle: {
                            color:
                                mapOption.visualMap.inRange.color[
                                Math.floor(
                                    ((item.value - mapOption.visualMap.min) /
                                        (mapOption.visualMap.max - mapOption.visualMap.min)) *
                                    (mapOption.visualMap.inRange.color.length - 1)
                                )]
                        }
                    };
                }),
                universalTransition: true,
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}',
                    fontSize: '0.8rem' // 数值标签
                }
            }
        };

        // 初始设置地图
        let currentOption: typeof mapOption | typeof barOption;
        centerMapInstance.setOption(mapOption);

        // 定时切换地图和柱状图
        setInterval(function () {
            currentOption = currentOption === mapOption ? barOption : mapOption;
            centerMapInstance.setOption(currentOption, true);
        }, 5000);
        // });

        option && centerMapInstance.setOption(option);

    } catch (error) {
        console.error("获取中心地图数据失败:", error);
    }
}


const pieChart1 = ref<HTMLElement | null>(null);
const pieChart2 = ref<HTMLElement | null>(null);
// 初始化
let pieChart1Instance: echarts.ECharts | null = null;
let pieChart2Instance: echarts.ECharts | null = null;
const initPieChart = () => {
    if (pieChart1.value && pieChart2.value) {
        pieChart1Instance = echarts.init(pieChart1.value);
        pieChart2Instance = echarts.init(pieChart2.value);
        updatePieChart1();
        updatePieChart2();
    }
};
const updatePieChart1 = async () => {
    try {
        var option;

        option = {
            //设置标题
            title: {
                text: '体检合格率',
                textStyle: {
                    color: '#ccc', // 文字颜色，可修改为其他颜色
                    fontSize: '1.2rem', // 文字大小
                    fontWeight: 'bold' // 文字加粗
                },
                left: 'center',
                top: '0rem'
            },
            tooltip: {
                trigger: 'item',
                textStyle: {
                    fontSize: remToPx(0.9), // 假设希望字体大小为 0.9rem
                },
                padding: [remToPx(0.5), remToPx(0.8)], // 提示框内边距，单位为 rem
                borderRadius: remToPx(0.4), // 圆角半径为 0.4rem
                borderWidth: remToPx(0.1), // 边框宽度为 0.1rem
            },
            // legend: {
            //     top: '8%',
            //     left: 'center',
            //     textStyle: {
            //         color: '#ccc', // 文字颜色，可自定义
            //         fontSize: 18 // 文字大小
            //     },
            //     itemWidth: 20, // 图例图标宽度
            //     itemHeight: 10 // 图例图标高度
            // },
            series: [
                {
                    name: '合格率',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        scale: true, // 开启悬浮时放大效果
                        scaleSize: remToPx(0.3), // 悬浮时放大尺寸为 0.5rem
                        label: {
                            show: true,
                            fontSize: remToPx(1.2),
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 403,
                            name: '合格',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#00FF7F' // 渐变起始颜色
                                    },
                                    {
                                        offset: 1, color: '#F0FFF0' // 渐变结束颜色
                                    }]
                                },
                            }
                        }, // 设置合格部分颜色
                        { value: 30, name: '不合格', itemStyle: { color: '#FF4500' } } // 设置不合格部分颜色
                    ]
                }
            ]
        };

        // 计算合格率
        const total = option.series[0].data.reduce((sum, item) => sum + item.value, 0);
        const passRate = ((option.series[0].data[0].value / total) * 100).toFixed(2);

        // 在中心显示合格率
        option.series[0].label = {
            show: true,
            position: 'center',
            formatter: `{a|${passRate}%}`,
            rich: {
                a: {
                    fontSize: '1.1rem',
                    fontWeight: 'bold',
                    color: '#00FF00'
                }
            }
        };

        option && pieChart1Instance.setOption(option);


    } catch (error) {
        console.log('获取左下中心图失败！')
    }
}
const updatePieChart2 = async () => {
    try {
        var option;

        option = {
            //设置标题
            title: {
                text: '军事兴趣社团入伍率',
                textStyle: {
                    color: '#ccc', // 文字颜色，可修改为其他颜色
                    fontSize: '1.2rem', // 文字大小
                    fontWeight: 'bold' // 文字加粗
                },
                left: 'center',
                top: '0'
            },
            tooltip: {
                trigger: 'item',
                textStyle: {
                    fontSize: remToPx(0.9), // 假设希望字体大小为 0.9rem
                },
                padding: [remToPx(0.5), remToPx(0.8)], // 提示框内边距，单位为 rem
                borderRadius: remToPx(0.4), // 圆角半径为 0.4rem
                borderWidth: remToPx(0.1), // 边框宽度为 0.1rem
            },
            series: [
                {
                    name: '合格率',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        scale: true, // 开启悬浮时放大效果
                        scaleSize: remToPx(0.3), // 悬浮时放大尺寸为 0.5rem
                        label: {
                            show: true,
                            fontSize: '1.2rem',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 403,
                            name: '入伍',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#00FF7F' // 渐变起始颜色
                                    },
                                    {
                                        offset: 1, color: '#F0FFF0' // 渐变结束颜色
                                    }]
                                },
                            }
                        }, // 设置合格部分颜色
                        { value: 200, name: '退团未入伍', itemStyle: { color: '#FF4500' } } // 设置不合格部分颜色
                    ]
                }
            ]
        };

        // 计算合格率
        const total = option.series[0].data.reduce((sum, item) => sum + item.value, 0);
        const passRate = ((option.series[0].data[0].value / total) * 100).toFixed(2);

        // 在中心显示合格率
        option.series[0].label = {
            show: true,
            position: 'center',
            formatter: `{a|${passRate}%}`,
            rich: {
                a: {
                    fontSize: '1.1rem',
                    fontWeight: 'bold',
                    color: '#00FF00'
                }
            }
        };

        option && pieChart2Instance.setOption(option);


    } catch (error) {
        console.log('获取左下中心图失败！')
    }
}


</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    justify-items: center;
    align-content: center;
}

.mapTop {
    margin-top: -1rem;
    height: 75%;
    width: 97%;
    position: relative;
}

.top-pie-chart {
    display: flex;
    width: 100%;
    height: 20%;
    top: 0.8rem;
}

.pie-chart {
    flex: 1;
    height: 100%;
    width: 40%;
}
</style>